<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery.serializeJSON/2.8.0/jquery.serializejson.js"></script>
    
    
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" id="serach">
          <input class="layui-input" placeholder="开始日" name="start" id="start">
          <input class="layui-input" placeholder="截止日" name="end" id="end">
          <input type="text" name="reservoirName"  id="fff" placeholder="请输入水库名称" autocomplete="off" class="layui-input">
           <input type="text" name="size"  placeholder="规模" autocomplete="off" class="layui-input">
          <button  class="layui-btn"     id="sb1"><i class="layui-icon">&#xe615;</i></button>
        </form>
      </div>
       
      	<div id="ss" class="layui-hide">
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加用户','./member-add.html',600,400)"><i class="layui-icon"></i>添加</button>         
        </div>
        
 <script type="text/html" id="qqqq">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add" onclick="del()">添加</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
  </div>
</script>
   
      
       <script type="text/html" id="barDemo_hash">
              <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> 
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
       </script>
      
      
         <table id="demo_hash" class="layui-hide" lay-filter="test"></table>  
     

    </div>

    
   
    
    
    
    
    
    
     
    <script>
            /*  时间控件 */
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        
        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });
      });
    
 
    var itable;
    var serachDate={};
    function reload(){
    	 itable.reload("demo_hash", { //此处是上文提到的 初始化标识id
         });
    	
    }
   /*  function serach(){
    	debugger;
    	serachDate=$("#serach").serializeJSON();
    	var ss=JSON.stringify(serachDate);
    	console.log(ss);
    	console.log("查询数据"+serachDate);
    	 itable.reload("demo_hash", { //此处是上文提到的 初始化标识id
         });
    } */
    layui.use(['jquery', 'table','form'], function(){
      var $ = layui.jquery;
      var table = layui.table;
      var layer = layui.layer;
      var form = layui.form;
      
      
      active = {
				search : function() {
				}	
					
			};
      
    //查询
		$("#sb1").click(function() {
			debugger;
			var param ={};
			serachDate=$("#serach").serializeJSON();
	    	var ss=JSON.stringify(serachDate);
				
			//执行重载
			table
					.reload(
							'demo_hash',
							{
								
								where :param
							});
		  
		})

      
      
      
      
      

      table.render({
          method: 'get',
          // size: 'sm',
          limit: 20,
          elem: '#demo_hash',
          toolbar: '#qqqq',
          totalRow: true,//开启合计行
          height: 'full-235',
          url: 'http://localhost:8080/hbsk/reservoir/list', //数据接口
          page: true, //开启分页
          request: {
        	     pageName: 'page' //页码的参数名称，默认：page
        	    ,limitName: 'limit' //每页数据量的参数名，默认：limit
        	  
          }, 
          request : function(params) {
             	var searchParam = {};
       
             	searchParam.pageName='page' //页码的参数名称，默认：page
                searchParam.limitName='limit' //每页数据量的参数名，默认：limit
             	searchParam.page = params.limit === undefined? "1" :params.offset/params.limit+1;
             	searchParam.limit = params.limit === undefined? -1 : params.limit
                 return searchParam;
              
             },
             where:  serachDate 
            	
            	 
            	
            	
            	 
              
            
           
             ,
             
            
          response: {
        	    statusName: 'status' //规定数据状态的字段名称，默认：code
        	    ,statusCode: 200 //规定成功的状态码，默认：0
        	    ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
        	    ,countName: 'total' //规定数据总数的字段名称，默认：count
        	    ,dataName: 'rows' //规定数据列表的字段名称，默认：data
         }, 
          cols: [
            [ //表头
            	
              {
            	type: 'checkbox', fixed: 'left'
              },
              {
                field: 'id',
                title: 'ID',
                width: '10%',
                sort: true,
                fixed: 'left'
              }, {
                field: 'reservoirName',
                title: '水库名称',
                width: '10%'
              }, {
                field: 'size',
                title: '水库规模',
                width: '10%',
                sort: true
              }, {
                field: 'city',
                title: '城市',
                width: '10%'
              }, {
                field: 'country',
                title: '区县',
                width: '20%'
              }, {
                field: 'type',
                title: '类型',
                width: '20%',
                sort: true
              }, {
                fixed: 'right',
                width: '20%',
                title:'操作',
                align: 'center',
                toolbar: '#barDemo_hash'
              }
            ]
          ]
        });
      itable=table;
      table.on('checkbox(test)', function(obj){
    	 
    	  console.log(obj.checked); //当前是否选中状态
    	  console.log(obj.data); //选中行的相关数据
    	  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    	});
      
      
   
      
       table.on('toolbar(test)', function(obj){
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data; //获取选中的数据
          switch(obj.event){
            case 'add':
              layer.msg('添加');
              x_admin_show('添加水库','./member-add.html',800,600);
            break;
            case 'update':
              if(data.length === 0){
                layer.msg('请选择一行');
              } else if(data.length > 1){
                layer.msg('只能同时编辑一个');
              } else {
                layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                
              
                
              /*   x_admin_show('编辑水库','./member-add.html',800,600); */
                layer.open({
                	  type: 2,
                	  area: [800+'px', 600 +'px'],
                	  fix: false, //不固定
                      maxmin: true,
                      shadeClose: true,
                      shade:0.4,
                	  content: './member-edit.html',
                	  success: function(layero, index){
                	    var body = layer.getChildFrame('body', index);//获取子页面内容
                	    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                	    body.find("#transmit").click();//执行子页面的方法
                	    body.find('#formTest input[name="id"]').val(checkStatus.data[0].id);
                	    body.find('#formTest input[name="reservoirName"]').val(checkStatus.data[0].reservoirName);
                	    body.find('#formTest select[name="size"]').attr("value",)(checkStatus.data[0].size)
                	    body.find('#formTest input[name="type"]').val(checkStatus.data[0].type);
                	    body.find('#formTest input[name="city"]').val(checkStatus.data[0].city);
                	  
                	    
                	    $(".but_par").click(function(){
                	    alert(222);
                	    })
                	  }
                	});
                
              }
            break;
            case 'delete':
              if(data.length === 0){
                layer.msg('请选择一行');
               
              } else {
            	  
            	  $.ajax({
                      type: "GET",
                      url: 'http://localhost:8080/hbsk/reservoir/del',
                      data:{"id":checkStatus.data[0].id},
                      contentType:'application/json;charset=UTF-8',
                      dataType:'json',
                      success: function (r) {
                           if (r.status == 200) {
                        	   layer.msg('删除成功');
                        	   table.reload("demo_hash", { //此处是上文提到的 初始化标识id
                                  
                               });
                        	  
                          } else {
                              layer.msg(r.msg);
                          }
                      },
                  }); 
            	/*   location.href = 'http://localhost:8080/hbsk/reservoir/del?id='+checkStatus.data[0].id;  */
              }
            break;
          };
        });  
        
        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
          var data = obj.data //获得当前行数据
          ,layEvent = obj.event; //获得 lay-event 对应的值
          if(layEvent === 'detail'){
            layer.msg('查看操作');
          } else if(layEvent === 'del'){
            layer.confirm('真的删除行么', function(index){
              obj.del(); //删除对应行（tr）的DOM结构
              layer.close(index);
              //向服务端发送删除指令
            });
          } else if(layEvent === 'edit'){
            layer.msg('编辑操作');
          }
        });

      
      
      
      
      
      
     
    });
    
   
    
    
    

       /*用户-停用*/
      function member_stop(obj,id){
          layer.confirm('确认要停用吗？',function(index){

              if($(obj).attr('title')=='启用'){

                //发异步把用户状态进行更改
                $(obj).attr('title','停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!',{icon: 5,time:1000});

              }else{
                $(obj).attr('title','启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!',{icon: 5,time:1000});
              }
              
          });
      }

      /*用户-删除*/
      function member_del(obj,id){
          layer.confirm('确认要删除吗？',function(index){
              //发异步删除数据
              $(obj).parents("tr").remove();
              layer.msg('已删除!',{icon:1,time:1000});
          });
      }



      function delAll (argument) {

        var data = tableCheck.getData();
  
        layer.confirm('确认要删除吗？'+data,function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
      }
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>

</html>